<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>24 封装运动框架多个属性</title>
    <style>
        div {
            background-color: pink;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
<button id="btn200">200</button>
<div id="box">
</div>
</body>
</html>

<script>
    var btn = document.getElementById("btn200");
    var box = document.getElementById("box");
    btn.onclick = function () {
        animate(box, {left: 200, top: 800, width: 400});
    }


    function animate(obj, json) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var flag = true;
            for (var k in json) {
                // 步长
                var current = parseInt(getStyle(obj, k));
                var step = (json[k] - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                obj.style[k] = current + step + 'px';
                if (current != json[k]){
                    flag = false;
                }
            }
            if (flag){
                clearInterval(obj.timer);
                console.log('结束了');
            }
        }, 30);
    }


    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return window.getComputedStyle(obj, null)[attr];
        }
    }

</script>